<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>携程旅行DEMO</title>
    <style>
        /*公用css*/
        body {
            margin: 0;
            padding: 0;
            font: 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /*content css*/
        /*头部*/
        .search-index {
            position: fixed;
            top: -2px;
            left: 50%;
            z-index: 12;
            width: 100%;
            height: 3.21em;
            padding: 7px 3.57em 7px 8px;
            background-color: #F6F6F6;
            border-bottom: 1px solid #CCC;
            border-top: 1px solid #CCC;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        .search-index{


            box-sizing: border-box;
        }
        .search-index div {
            height: 2em;
            overflow: hidden;
            padding: 0 5px;
            line-height: 2em;
            border-radius: 5px;
            background-color: #fff;
            color: #666;
            font-size: .86em;
            border: 1px solid #999;
            box-shadow: 0 2px 4px rgba(0,0,0,.2);
        }
        .search-index div span {
            position: relative;
            padding-left: 20px;
        }
        .search-index .notice-myctrip {
            width: 44px;
            height: 44px;
            position: absolute;
            top: 0;
            right: 4px;
        }
        .notice-myctrip{
            padding-top: 10px;
            text-align:center;
        }
        .banner a {
            width: 100%;
            display: block;
        }

        .banner a img {
            width: 100%;
            display: block; /*去点间隙*/
            margin-top: 50px;
        }

        /*导航栏*/
        .nav {
            padding: 5px;
            box-sizing: border-box;
        }

        .nav section {
            height: 90px;
            width: 100%;
            border-radius: 4px;
        }

        .nav section.nav_top {
            margin-bottom: 5px;
        }

        .nav section.nav_top:nth-child(1) {
            background: #ff697a;
        }

        .nav section.nav_top:nth-child(2) {
            background: #3d98ff;
        }

        .nav section.nav_top:nth-child(3) {
            background: #44c522;
        }
        .nav section.nav_top .nav_row {
            color:#fff;
            text-align: center;
            font-size:25px;
            margin-top: 20px;
        }
        .nav section.nav_top ul {
            display: flex;
        }

        .nav section.nav_top ul li:first-child {
            flex: 1;
        }

        .nav section.nav_top ul li:last-child{
            flex: 2;
            display: flex;
            flex-wrap: wrap;
        }

        .nav section.nav_top ul li:last-child a{
            width: 50%;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            height: 45px;
            line-height: 45px;
            text-align: center;
            box-sizing: border-box;
            color: #fff;
            /*text-shadow: 1px 1px 2px #ccc;*/
        }
        .nav section.nav_top ul li:last-child a:nth-last-child(-n+2){
            border-bottom: none;
        }



        .nav section.nav_bot {
            background: #fc9720;
            display: flex;
            flex-wrap: wrap;
        }

        .nav section.nav_bot a{
            width: 33.3333%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            box-sizing: border-box;
            color: #fff;
            /*text-shadow: 1px 1px 2px #ccc;*/
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
        }
        .nav section.nav_bot a:nth-child(3n+1){
            border-left: none;
        }
        .nav section.nav_bot a:nth-last-child(-n+3){
            border-bottom: none;
        }

        /*内容*/
        .product{
            display: flex;

        }
        .product a{
            flex: 1;
        }
        .product a img{
            width: 100%;
        }

        /*底部*/
        .footer{}
        .footer ul{
            display: flex;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
        }
        .footer ul li{
            flex: 1;
        }
        .footer ul li a{
            display: block;
            height: 36px;
            line-height: 36px;
            text-align: center;
            color: #333;
            font-size: 12px;
        }
        .footer p{
            text-align: center;
            font-size: 14px;
            color: #666;
        }

    </style>
</head>
<body>
<!--头部-->
<div id="search-box" class="search-index">
    <div>
        <span>搜索:目的地/酒店/景点/航班号</span>
    </div>
    <a class="notice-myctrip">
        <span class="search-my">登 陆</span>
    </a>
    </div>
<header class="banner">
    <a href="#">
        <img src="images/banner.jpg" alt=""/>
    </a>
</header>
<!--导航栏-->
<nav class="nav">
    <section class="nav_top">
        <ul>
            <li class="nav_row">酒店</li>
            <li>
                <a href="#">海外酒店</a>
                <a href="#">团购</a>
                <a href="#">特价酒店</a>
                <a href="#">民宿·客栈</a>
            </li>
        </ul>
    </section>
    <section class="nav_top">
        <ul>
            <li class="nav_row">机票</li>
            <li>
                <a href="#">火车票·抢票</a>
                <a href="#">汽车票·船票</a>
                <a href="#">特价机票</a>
                <a href="#">专车·租车</a>
            </li>
        </ul>
    </section>
    <section class="nav_top">
        <ul>
            <li class="nav_row">旅游</li>
            <li>
                <a href="#">目的地攻略</a>
                <a href="#">邮 轮</a>
                <a href="#">周边游</a>
                <a href="#">定制旅行</a>
            </li>
        </ul>
    </section>
    <section class="nav_bot">
        <a href="">景点·玩乐</a>
        <a href="">美食林</a>
        <a href="">全球购·换汇</a>
        <a href="">礼品卡</a>
        <a href="">WiFi电话卡</a>
        <a href="">保险·签证</a>
    </section>
</nav>
<!--内容-->
<main class="product">
    <a href="#"><img src="images/extra_1.png" alt=""/></a>
    <a href="#"><img src="images/extra_2.png" alt=""/></a>
</main>
<!--底部-->
<footer class="footer">
    <ul>
        <li><a href="">电话预定</a></li>
        <li><a href="">下载客户端</a></li>
        <li><a href="">我的</a></li>
    </ul>
    <p>网站地图 | Global sites | 电脑版</p>
    <p>©2016 携程旅行</p>
</footer>
</body>
</html>